* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    #app {
        @include box-flex($width: 100%,
            $height: 100%,
            $direction: row,
            $justify: center,
            $align: center);

        color: #fff;
        font-family: font-regular;
        font-size: 14px;
    }

    .graphic-point {
        img {
            width: 20px;
            height: auto;
        }
    }
}

.card-container {
    @include box-flex($width: 100%,
        $height: auto,
        $direction: column,
        $justify: center,
        $align: center);

    .card-title {
        @include box-flex($width: 100%,
            $height: 35px,
            $direction: row,
            $justify: space-between,
            $align: center);
        position: relative;
        padding: 5px 30px 0 30px;
        background: url('@/assets/images/bg-card-title.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
        letter-spacing: 2px;

        &::after,
        &::before {
            content: "";
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
        }

        &::before {
            top: 0;
            right: 0;
            border-top: solid 2px #0DF;
            border-right: solid 2px #0DF;
        }

        .icon {
            font-size: 20px;
			cursor: pointer;
        }
    }

    .card-content {
        position: relative;
        background: rgba($color: #02172F, $alpha: 50%);

        &::after,
        &::before {
            content: "";
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
        }

        &::before {
            right: 0;
            bottom: 0;
            border-right: solid 2px #0DF;
            border-bottom: solid 2px #0DF;
        }

        &::after {
            bottom: 0;
            left: 0;
            border-bottom: solid 2px #0DF;
            border-left: solid 2px #0DF;
        }
    }
}

@font-face {
    font-family: font-bolder;
    src: url('@/assets/fonts/AlibabaPuHuiTi-2-105-Heavy.ttf');
}

@font-face {
    font-family: font-number;
    src: url('@/assets/fonts/PmzdBiaoTi.TTF');
}

@font-face {
    font-family: font-bold;
    src: url('@/assets/fonts/SOURCEHANSANSCN-BOLD.OTF');
}

@font-face {
    font-family: font-medium;
    src: url('@/assets/fonts/SOURCEHANSANSCN-MEDIUM.OTF');
}

@font-face {
    font-family: font-regular;
    src: url('@/assets/fonts/SOURCEHANSANSCN-REGULAR.OTF');
}

// 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
::-webkit-scrollbar {
    width: 5px;
    height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
    border-radius: 5px;
}

// 滑块
::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

// 轨道
::-webkit-scrollbar-track {
    border-radius: 5px;
}